<template>
  <div class="detail">
    <div class="breadcrumb-area">
      <div class="content">
        <div class="breadcrumb">
          <a href="/">首页</a>
          <a class="active">页面组件</a>
        </div>
        <div class="title">分类栏</div>
      </div>
    </div>
    <div class="product-desc">
      <div class="container">
        <div class="title">示例</div>
        <div class="demo">
          <Product :data="p1" class="item" />
          <Product :data="p2" class="item" />
          <Product :data="p3" class="item" />
          <Product :data="p4" class="item" />
          <Product :data="p5" type="bounce" class="item" />
          <Product :data="p6" type="bounce" class="item" />
          <div style="width: 300px"></div>
          <Product :data="p7" type="bounce" size="large" class="item" />
          <Product :data="p8" type="bounce" size="large" class="item" />
        </div>
        <div class="attribute">
          <div class="title">概述</div>
          <p>
            常用于一组产品、商品、文章、视频等列表分页展现
          </p>
        </div>
        <div class="attribute">
          <div class="title">文件代码路径</div>
          <p>
            src/views/materials/component/component3/Product.vue
          </p>
        </div>
        <div class="attribute">
          <div class="title">依赖</div>
          <p>
            view-design、vue-lazyload
          </p>
        </div>
        <div class="attribute">
          <div class="title">Props</div>
          <p>
            <Table
            :columns="props"
            :data="data1"
            border
            width="1000"
          ></Table>
          </p>
        </div>
        <div class="attribute">
          <div class="title">Events</div>
          <p>
            <Table
              :columns="events"
              :data="data2"
              border
              width="1000"
            ></Table>
          </p>
        </div>
        <div class="attribute">
          <div class="title">数据结构</div>
          <p>仅展示必要字段，可根据需求自行添加其他字段数据</p>
          <b>
            data：产品数据
          </b>
          <vue-json-pretty :data="dataDemo1" />
        </div>
      </div>
    </div>
    <Action />
  </div>
</template>

<script>
import VueJsonPretty from "vue-json-pretty";
import { props, events, methods } from "@/libs/columns";
import Product from "./Product.vue";
import Action from "@/views/detail/Action.vue";
export default {
  name: "component",
  components: { Product, Action, VueJsonPretty },
  data() {
    return {
      props: props,
      events: events,
      methods: methods,
      p1: {
        title: "Java读源码之Netty深入剖析",
        description: "更快上手实际开发",
        price: 299,
        sales: 30,
        picUrl: require("@/assets/demo/class9.png"),
      },
      p2: {
        title: "全网最热Python3入门+",
        description: "更快上手实际开发",
        price: 366,
        sales: 130,
        picUrl: require("@/assets/demo/class2.png"),
        label: "快看这里",
      },
      p3: {
        title: "Java+Selenium3.0深度解析自动化测试框架设计与开发",
        description: "实战 高级",
        price: 248,
        sales: 20,
        picUrl: require("@/assets/demo/class10.png"),
        label: "快看右上角",
        tag: "New",
      },
      p4: {
        title: "Java+Selenium3.0深度解析自动化测试框架设计与开发",
        description: "实战 高级",
        price: 248,
        sales: 20,
        picUrl: require("@/assets/demo/class4.png"),
        label: "快看右上角",
        tag: "Hot",
      },
      p5: {
        title: "Spring Cloud微服务实战+",
        description: "实战 高级",
        price: 366,
        sales: 36,
        picUrl: require("@/assets/demo/class7.png"),
      },
      p6: {
        title: "玩转数据结构 从入门到进阶",
        description: "从入门到进阶",
        price: 299,
        sales: 221,
        picUrl: require("@/assets/demo/class8.png"),
      },
      p7: {
        title: "Vue.js 源码全方位深入解析",
        description:
          "全方位讲解 Vue.js 源码，学精学透 Vue 原理实现，进阶高级工程师",
        price: 488,
        sales: 118,
        rate: 9.8,
        picUrl: require("@/assets/demo/class1.png"),
      },
      p8: {
        title: "Kubernetes实战 高可用集群搭建,配置,运维与应用",
        description: "以生产为目标，原理+操作， Kubernetes结合典型云原生应用",
        price: 199,
        sales: 62,
        rate: 9.8,
        picUrl: require("@/assets/demo/class3.png"),
      },
      data1: [
        {
          name: "color",
          desc: "主题颜色",
          type: "String",
          value: "#F01414",
        },
        {
          name: "type",
          desc: "展示类型，可选值为 bounce 具有弹跳动画效果 或者不设置",
          type: "String",
          value: "-",
        },
        {
          name: "size",
          desc: "展示大小，可选值为 large 或者不设置",
          type: "String",
          value: "-",
        },
        {
          name: "showPrice",
          desc: "是否显示价格一栏",
          type: "Boolean",
          value: "true",
        },
        {
          name: "showRate",
          desc: "是否显示评分一栏，当size设为large时有效",
          type: "Boolean",
          value: "true",
        },
        {
          name: "data",
          desc: "产品数据，详见下方数据结构说明",
          type: "Object",
          value: "{ }",
        },
      ],
      data2: [
        {
          name: "on-click",
          type: "产品击事件",
          value: "当前点击项数据",
        },
        {
          name: "on-click-cart",
          type: "购物车点击事件",
          value: "当前点击项数据",
        },
      ],
      dataDemo1: {
        title: "产品标题",
        description: "产品描述",
        price: "价格",
        sales: "销量",
        rate: "评分",
        picUrl:
          "图片链接，图片大小像素比例 216*120 px，当size设为large时图片大小像素比例 270*148 px",
        label: "图片左下角标签",
        tag: "右上角Tag，当设置为 New 或 Hot 时具有相应颜色样式",
      },
    };
  },
  methods: {},
  mounted() {},
};
</script>

<style scoped lang="less">
@import "@/views/detail/detail.less";
.demo {
  display: flex;
  flex-wrap: wrap;
  .item {
    margin: 10px 20px 10px 20px;
  }
}
</style>
